/******************************************************************************************
 * Import
 ******************************************************************************************/

// module
import React, {Component} from 'react';
import {View} from 'react-native';
import { TextareaItem, Button, Icon } from 'antd-mobile-rn';


// project
import {
    CAround, CBetween, Center, Column, CHand, CItemX, CItemY, CLine, CRow, CWrap, 
    CIcon, CImage, CSvg, CText,
    CContent, CFloat, CFooter, CHeader, CPage, CSide, 
    CEmpty, CError, CFail, CSkeleton, 
    CLabel, CButton
} from '../../../library/comp';

import Licon from '../../../library/comp/project/icon';



/******************************************************************************************
 * Export Class
 ******************************************************************************************/

export default class FeedBack extends Component {

    /*------------------------------------------------------------------------------------
	 * 初始化
	 *-----------------------------------------------------------------------------------*/
	constructor(props) {
        super(props);
        // this.Nav = this.props.navigation;

        /**
         * state
         */
		this.state = {
            // 反馈类型变量
			type:[
                {name: '功能意见'},
                {name: '使用问题'},
                {name: '性能问题'},
                {name: '其他问题'}
            ],
            // 用户手机号变量（需要隐藏中间四位）
            phone:'13165595989',
		};
    }

    /*------------------------------------------------------------------------------------
	 * 渲染
	 *-----------------------------------------------------------------------------------*/
	render() {
		return (
			<CPage>
				
				<CContent mt='96' bg='#efeff4'>
                    <View style={{backgroundColor:'#fff',marginTop:10, paddingLeft:15,paddingRight:15,paddingBottom:15}}>

                        {/* 反馈类型标题 */}
                        <CRow mt='20' h='60' y='center' bb='2 #f0f0f0'>
                            <CText color='#494949' size='26'>反馈类型</CText>
                        </CRow>

                        {/* 类型 */}
                        <CWrap bb='2 #f0f0f0'>
                            {this.state.type.map(item => {
                                return (
                                    <CHand key={item.name} bg='#cef1e1' ba='2 #31ba72' ra='10' w='160' mr='28' my='12' x='center'>
                                        <CText color='#31ba72' pa='12' size="22">{item.name}</CText>
                                    </CHand>
                                )
                            })}
                        </CWrap>

                        {/* 联系方式 */}
                        <CRow h='80' y='center' bb='2 #f0f0f0'>
                            <CBetween>
                                <CHand>
                                    <CText size='26'>联系方式</CText>
                                </CHand>
                                <CHand>
                                    <CText size='26'>{this.state.phone.substring(0,3) + '****' + this.state.phone.substring(7,11)}</CText>
                                </CHand>
                            </CBetween>
                        </CRow>

                        {/* 留言反馈标题 */}
                        <CRow h='80' y='center' >
                            <CText size='26'>留言反馈</CText>
                        </CRow>

                        {/* 留言多行输入框 */}
                        <View>
                            <TextareaItem
                                placeholder='请输入您的宝贵意见'
                                placeholderCTextColor="#c9c9c9"
                                CRows={5}
                                style={{fontSize:14, lineHeight:28, borderWidth:1,borderColor:'#f0f0f0',borderRadius:3}}
                            ></TextareaItem>
                        </View>
                    </View>
                    
                    {/* 反馈提交按钮 */}
                    <View style={{ paddingLeft:10, paddingRight:10, marginTop:20}}>
                        <Button style={{backgroundColor:'#26c75e',borderWidth:0}}><CText color='#fff' size="30">提交</CText></Button>
                    </View>
                   
				</CContent>
				
                {/* 顶部 star */}
                <CHeader h='96' y='center' bg='#fff'>
                    <CBetween px='20'>
                        <CHand onPress={(e)=> {
                            this.Nav.goBack()
                        }}>
                            <Icon type='left' size='md' color='#00CC66' />
                        </CHand>

                        <CText size='34'>意见反馈</CText>
                        <CHand w='44' h='44'></CHand>
                    </CBetween>
                </CHeader>
                {/* 顶部 star */}
                
			</CPage>
		);
	}
}
